transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。Http://www.w3.org/TR/CSS3-transitions/
transition可以和Transform同时使用。
transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。
语法
transition-property: all | none | <property>[ ,<property> ]*;设置要以动画方式变换的CSS属性。
| 语法项目 | 说明 |
|---|---|
| 初始值 | all |
| 适用于 | 所有元素，以及:before和:after伪元素 |
| 可否继承 | 否 |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
说明
transition-property可以设置要以动画方式变换的CSS属性，默认值all表示变换所有的属性，如果只针对单个或者多个CSS属性进行变换，就可以用这个属性来进行单独设置。
取值
all：表示针对所有元素。
none：表示没有元素。
ident：指定CSS属性列表
实例代码
CSS
.transition_property_1{
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition-property:all;
-moz-transition-property:all;
position:absolute;
left:10px;
top:50px;
}
.transition_property_2{
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition-property:none;
-moz-transition-property:none;
position:absolute;
left:250px;
top:50px;
}
.transition_property_3{
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition-property:width;
-moz-transition-property:width;
position:absolute;
left:480px;
top:50px;
}
.transition_property_1:hover,
.transition_property_2:hover,
.transition_property_3:hover{
width:500px;
height:300px;
}
HTML
运行一下 »
高级版运行一下 »
<div class="demo_box transition_property_1">变换所有的属性</div> <div class="demo_box transition_property_2">不变换任何属性</div> <div class="demo_box transition_property_3">只变换宽度属性</div>
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.7+ | Opera 10.50+ | Safari 3.2+ | Chrome 2.0+ |